<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环遍历</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div>
    {{info}}
    <!--v-for循环遍历-->
    <h1 v-for="name in arr">{{name}}</h1>

    <table border="1">
        <caption>人物列表</caption>
        <tr>
            <th>名字</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="p in persons">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.gender}}</td>
        </tr>
    </table>


    <table border="1">
        <caption>物品表格</caption>
        <tr>
            <th>标题</th>
            <th>价格</th>
            <th>存货</th>
        </tr>
        <tr v-for="p in products">
            <td>{{p.title}}</td>
            <td>{{p.price}}</td>
            <td>{{p.num}}</td>
        </tr>
    </table>
</div>
<script>
    let v= new Vue({
        el:"body>div",
        data:{
            info:"循环遍历",
            arr:["刘备","张飞","关羽"],
            persons:[{name: "刘备", age: 30, gender: "男"},
                {name: "孙尚香", age: 60, gender: "女"},
                {name: "刘禅", age: 80, gender: "男"}
            ],
            products:[
                {title:"冰红茶",price:3,num:1000},
                {title:"金桔柠檬",price:4,num:900},
                {title:"脉动",price:5,num:110},
                {title:"元气森林",price:5,num:100}
            ]
        }
    })
</script>
</body>
</html>